/* eslint-disable react/require-default-props */
import React, { useEffect, useRef } from 'react';
import { Button, message, Space } from 'antd';
import ProForm, {
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
  ModalForm,
  ModalFormProps,
  ProFormInstance,
} from '@ant-design/pro-form';
import useSearch from '@/hooks/useSearch';

const fakeApi = async (id: string) => {
  console.log(`查询数据，id=${id}`);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: '蚂蚁设计有限公司',
        company: 'hehe',
        useMode: 'chapter',
      });
    }, 300);
  });
};

export default ({
  isCreate,
  createBtn,
  ...others
}: { isCreate?: boolean; createBtn?: React.ReactElement; title: string } & Partial<ModalFormProps>) => {
  const formRef = useRef<ProFormInstance>();
  const search = useSearch();
  const op = isCreate ? 'create' : search.get('type'); // create/edit/show
  const formLayout = op === 'show' ? 'horizontal' : 'vertical';
  const onlyread = op === 'show';
  const otherProps = op === 'create' ? others : {};
  const FormComp = op === 'create' ? ModalForm : ProForm;
  useEffect(() => {
    if (op === 'show' || op === 'edit') {
      const id = search.get('id');
      fakeApi(id!).then(formRef.current?.setFieldsValue);
    }
  }, []);
  return (
    <FormComp
      style={{ background: 'white', padding: '20px 20px' }}
      trigger={createBtn}
      layout={formLayout}
      formRef={formRef}
      onFinish={async (values: any) => {
        console.log(values);
        message.success('提交成功');
      }}
      submitter={{
        render: (props, doms) => {
          return onlyread ? [] : doms;
        },
      }}
      // eslint-disable-next-line react/jsx-props-no-spreading
      {...otherProps}
    >
      <ProFormText
        width='md'
        name='name'
        readonly={onlyread}
        label='签约客户名称'
        tooltip='最长为 24 位'
        placeholder='请输入名称'
      />
      <ProFormText width='md' name='company' readonly={onlyread} label='我方公司名称' placeholder='请输入名称' />
      <ProFormText
        name={['contract', 'name']}
        readonly={onlyread}
        width='md'
        label='合同名称'
        placeholder='请输入名称'
      />
      <ProFormDateRangePicker width='md' readonly={onlyread} name={['contract', 'createTime']} label='合同生效时间' />
      <ProFormSelect
        options={[
          {
            value: 'chapter',
            label: '盖章后生效',
          },
        ]}
        width='xs'
        readonly={onlyread}
        name='useMode'
        label='合同约定生效方式'
      />
      <ProFormSelect
        width='xs'
        options={[
          {
            value: 'time',
            label: '履行完终止',
          },
        ]}
        readonly={onlyread}
        name='unusedMode'
        label='合同约定失效效方式'
      />
      <ProFormText width='sm' name='id' readonly={onlyread} label='主合同编号' />
      <ProFormText name='project' width='md' readonly={onlyread} disabled label='项目名称' initialValue='xxxx项目' />
      <ProFormText width='xs' name='mangerName' readonly={onlyread} disabled label='商务经理' initialValue='启途' />
    </FormComp>
  );
};
